<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑马面面</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- header部分开始 -->
    <header>
        黑马面面
    </header>
    <!-- header部分结束 -->
    <!-- nav与go模块部分开始 -->
    <section class="box_nav_go">
    <!-- nav部分开始 -->    
    <nav>
        <a href="#" class="item">
            <img src="icons/icon1.png" alt="">
            <span>HR面试</span>
        </a>
        <a href="#" class="item">
            <img src="icons/icon2.png" alt="">
            <span>笔试</span>
        </a>
        <a href="#" class="item">
            <img src="icons/icon3.png" alt="">
            <span>技术面试</span>
        </a>
        <a href="#" class="item">
            <img src="icons/icon4.png" alt="">
            <span>模拟面试</span>
        </a>
        <a href="#" class="item">
            <img src="icons/icon5.png" alt="">
            <span>面试技巧</span>
        </a>
        <a href="#" class="item">
            <img src="icons/icon6.png" alt="">
            <span>薪资查询</span>
        </a>
        
    </nav>
    <!-- nav部分结束 -->
    <!-- go模块部分开始 -->
     <section class="go">
        <img src="images/go.png" alt="">
     </section>
    <!-- go模块部分结束 -->
    </section>
    <!-- nav与go模块部分结束 -->


    <!-- content1模块部分开始 -->
    <section class="content">
        <div class="content_title">
            <h4 class="theme">
                <span><img src="icons/i2.png" alt=""></span>
                就业指导
            </h4>
            <h4 class="more">
                更多 >>
            </h4>
        </div>
        <div class='carousel_1'>
            <!-- Swiper -->
            <div class="swiper-container content1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="images/pic.png" alt="">
                        <h4>老师教你应对面试技巧</h4>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/2.jpg" alt="">
                        <h4>刘德华</h4>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/3.jpg" alt="">
                        <h4>刘德华</h4>
                    </div>
                    
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div> 
            </div>
            <!-- Add Arrows --> 
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
       </div>
    </section>
    <!-- content1模块部分结束 -->

    <!-- content2模块部分开始  -->
    <section class="content">
        <div class="content_title">
            <h4 class="theme">
                <span><img src="icons/i1.png" alt=""></span>
                充电学习
            </h4>
            <h4 class="more">
                更多 >>
            </h4>
        </div>
        <div class="carousel_2">
            <div class="swiper mySwiper content2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="images/pic1.png" alt="">
                        <h4>说地道英语，告别中式英语</h4>
                        <h5>156人学习</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/pic2.png" alt="">
                        <h4>思维攻略金字塔 思维提升写作能力</h4>
                        <h5>125人学习</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/pic2.png" alt="">
                        <h4>XMind思维导图</h4>
                        <h5>86人学习</h5>
                    </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    <!-- content2模块部分结束 -->

    <!-- footer部分开始 -->
    <section class="footer">
        <a href="" class="item">
            <span><img src="icons/home.png" alt=""></span>
            <p>首页</p>
        </a>

        <a href="" class="item">
            <span><img src="icons/net.png" alt=""></span>
            <p>技术面试</p>
        </a>
        <a href="" class="item">
            <span><img src="icons/ms.png" alt=""></span>
            <p>模拟面试</p>
        </a>
        <a href="" class="item">
            <span><img src="icons/user.png" alt=""></span>
            <p>我的</p>
        </a>
    <section/>
     <!-- footer部分结束 -->
    <script src="js/flexible.js"></script>
    <script src="js/swiper.min.js"></script>

    <script>
        (function(){
            var swiper = new Swiper('.content1', {
                slidesPerView: 2,
                spaceBetween: -20,
                centeredSlides: true,//主Slide是否居中
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                  }
              });
        })(); 
    </script>
    <script>
    var swiper = new Swiper(".content2", {
        slidesPerView: 2.2,
        spaceBetween: 30,
        pagination: {
        clickable: true,
        },
    });
    </script>
</body>
</html>